<template>
    <div>
        <HETTable ref="builtInWhitelistTable"
            :pageSize="10" 
            :tableFields="whitelistTableFields" 
            :tableData="builtInWhitelistTableData"
            :enableSearch="false"
            :operationCol="operationCol" 
            :tableCheckbox="false"
            :handleSelectionChange="handleSelectionChange" 
            :total="whitelistTotal"
            @getTableData="getBuiltInWhitelist">
        </HETTable>
        <el-dialog v-if="whitelistDetails" v-model="whitelistDetails" title="内置白名单详情" width="900" :center="true" :close-on-click-modal="false">
            <HETTable ref="whitelistDetailsTable"
                :pageSize="10" 
                :tableFields="whitelistDetailsFields" 
                :tableData="whitelistDetailsTableData"
                :enableSearch="false"
                :tableCheckbox="false"
                :total="whitelistDetailsTotal"
                :select-all="selectAll"
                @getTableData="getWhitelistDetails">
            </HETTable>
        </el-dialog>
        <el-dialog v-if="whitelistApplied" v-model="whitelistApplied" title="可应用内置白名单列表" width="900" :center="true" :close-on-click-modal="false">
            <span>当前选中系统版本：{{ whitelistAppliedRow.fileOSVersion }}</span>
            <div class="applied-table">
                <HETTable ref="whitelistAppliedTable"
                    :pageSize="8" 
                    :tableFields="whitelistAppliedFields" 
                    :tableData="whitelistAppliedTableData"
                    :enableSearch="false"
                    :tableCheckbox="true"
                    :handleSelectionChange="appliedHandleSelectionChange" 
                    :total="whitelistAppliedTotal"
                    @getTableData="getWhitelistApplied">
                </HETTable>
            </div>
            <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="queryApplied">
                应用
                </el-button>
                <el-button @click="whitelistApplied = false">取消</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, toRaw, markRaw, watch, onMounted } from 'vue'
import HETTable from '~/components/common/HETTable.vue'
import { ElMessage } from 'element-plus'
import { 
    req_getbuiltInWhitelist,
    req_getbuiltInWhitelistDetails,
    req_getWhitelistPolicylist,
    req_setWhitelistApplycredit
} from '~/utils/axios/programWhitelist.js'
import { useTreeStore } from "~/utils/pinia/tree.js"
import { useUserStore } from "~/utils/pinia/user.js"
import { Refresh, Delete, Edit, Plus, Download, Upload } from '@element-plus/icons-vue'
const successElMessage = () => {
    ElMessage({
        message: '修改成功',
        type: 'success',
    })
} 
/**
 * 
 * 详情模态框
 * 
 * ***/ 
// 用户点击详情时的列数据
const whitelistDetailsRow = ref()
// 模态框 ref
const whitelistDetails = ref(false)
// 模态框中的table的ref
const whitelistDetailsTable = ref()
// 表格数据存放
const whitelistDetailsTableData = ref()
// 表格数据数量存放
const whitelistDetailsTotal = ref(0)
// 详情表格
const whitelistDetailsFields = reactive([
    { name: "fileName", label: "文件名"},
    { name: "filePath", label: "路径"},
    { name: "filecertsigner", label: "指纹特征"},
    { name: "fileType", label: "文件类型" },
    { name: "desc", label: "文件描述" },
    { name: "fileSize", label: "文件大小" },
])
const getWhitelistDetails = async (countParams, searchParams) => {
    let detailsParams = {
        page: searchParams.$page,
        size: searchParams.$limit,
        fileWlType: 0,
        fileOSVersion: whitelistDetailsRow.value.fileOSVersion
    }
    await req_getbuiltInWhitelistDetails(treeStore.treeDeviceId,detailsParams).then(res => {
        whitelistDetailsTableData.value = res.data.categoryList;
        whitelistDetailsTotal.value = Number(res.data.total) || 0;
    })
    whitelistDetailsTable.value.finish()
}
/**
 * 
 * 应用模态框
 * 
 * ***/ 
// 模态框 ref
const whitelistApplied = ref(false)
// 用户点击详情时的列数据
const whitelistAppliedRow = ref()
// 应用行的数据
const appliedSelectionChangeValue = ref('')
// 模态框中的table的ref
const whitelistAppliedTable = ref()
// 表格数据存放
const whitelistAppliedTableData = ref()
// 表格数据数量存放
const whitelistAppliedTotal = ref(0)

const arrangeFn = () => {

}
// 应用表格数据设置
const whitelistAppliedFields = reactive([
    { name: "status", label: "部署状态", width: '80px', type:'state' },
    { name: "policyName", label: "策略名称"},
    { name: "type", label: "类型" },
    { name: "modifyTime", label: "修改时间" },
    { name: "user", label: "用户" },
])
const getWhitelistApplied = async (countParams, searchParams) => {
    let detailsParams = {
        page: searchParams.$page,
        size: searchParams.$limit,
    }
    await req_getWhitelistPolicylist(treeStore.treeDeviceId,detailsParams).then(res => {
        let typeStr = '';
        whitelistAppliedTableData.value = res.data.policyList.map(item => {
            switch (item.type) {
                case 2:
                    typeStr = '扫描白名单'
                    break;
                case 3:
                    typeStr = '远程下发白名单'
                    break;
                case 4:
                    typeStr = '本地导入白名单'
                    break;
                default:
                    typeStr = '未知'
                    break;
            }
            return {
                ...item,
                type:typeStr,
                status: Boolean(item.status) ? 'online on-status' : 'online off-status'
            }
        })
        whitelistAppliedTotal.value = Number(res.data.total) || 0;
    })
    whitelistAppliedTable.value.finish()
}
// 表格中用户选择复选框时的函数
const appliedHandleSelectionChange = (val) => {
    // HETTable组件的el-table的ref
    let tableRef = whitelistAppliedTable.value.getRef()
    // 这部分代码是让复选框设置为单选
    val.map( (row,index) => {
        if(val.length <=1 ){
            return
        }
        tableRef.toggleRowSelection(row,false)
        if(index === val.length-1){
            tableRef.toggleRowSelection(row,true)
            appliedSelectionChangeValue.value = row;
        }
    })
    if(appliedSelectionChangeValue.value === ''){
        appliedSelectionChangeValue.value = val[0]
    }
    if (val.length >= 1) {
        handleSelectionChangeFlag.value = false;
    } else {
        handleSelectionChangeFlag.value = true;
    }
}
// 点击应用时，下发应用请求
const queryApplied = () => {
    let appliedParams = {
        fileOSVersion: whitelistAppliedRow.value.fileOSVersion,
        policyId: appliedSelectionChangeValue.value.policyId
    }
    console.log(appliedParams)
    req_setWhitelistApplycredit(treeStore.treeDeviceId,appliedParams).then( res => {
        whitelistApplied.value = false;
        successElMessage()
    } )
}

/**
 * 
 * 内置白名单表格
 * 
 * ***/ 
// 树形组件pinia注册
const treeStore = useTreeStore()
// 表格ref
const builtInWhitelistTable = ref()
// 表格的data数据存储变量
const builtInWhitelistTableData = ref()
// 表格的total
const whitelistTotal = ref(0)
// 表格选中复选框时 展示或隐藏删除按钮的标识
let handleSelectionChangeFlag = ref(true)
// 选中的行的数据
const selectionChangeValue = ref(null)
// 已部署的策略
const strategy = ref()
// 已部署策略名称
const policyName = ref()
// 当前程序白名单列表日志表格 列名与数据源设置
const whitelistTableFields = reactive([
    { name: "fileWlType", label: "类型"},
    { name: "fileOSVendor", label: "系统厂商" },
    { name: "fileOSType", label: "是否国产" },
    { name: "fileOSVersion", label: "系统版本" },
])
const detailsFn = (index,row) => {
    whitelistDetails.value = true;
    whitelistDetailsRow.value = row;
}
const appliedFn = (index,row) => {
    whitelistApplied.value = true;
    whitelistAppliedRow.value = row;
}
const operationCol = [
    { name: '详情', ev: detailsFn },
    { name: '应用', ev: appliedFn }
]
// 表格中用户选择复选框时的函数
const handleSelectionChange = (val) => {
    selectionChangeValue.value = val;
    if (val.length >= 1) {
        handleSelectionChangeFlag.value = false;
    } else {
        handleSelectionChangeFlag.value = true;
    }
}
const getBuiltInWhitelist = async (countParams, searchParams) => {
    if(treeStore.treeDeviceId){
        let whitelistParams = {
            page: searchParams.$page,
            size: searchParams.$limit,
        }
        req_getbuiltInWhitelist(treeStore.treeDeviceId,whitelistParams).then( res => {
            builtInWhitelistTableData.value = res.data.categoryList.map( item => {
                return {
                    ...item,
                    fileOSType: item.fileOSType == '0' ? '否' : '是',
                    fileWlType: item.fileWlType == '0' ? '操作系统' : '工控应用',
                }
            })
            whitelistTotal.value = Number(res.data.total) || 0;
        },err => {
            ElMessage.error(err)
        })
    }else{
        builtInWhitelistTableData.value = []
    }
    builtInWhitelistTable.value.finish()
    treeStore.treeLinkedTableRef = builtInWhitelistTable;
}
</script>

<style lang="scss" scoped>
:deep(.applied-table){
    .online{
        display: inline-block;
        height: 12px;
        width: 12px;
        border-radius: 50%;
    }
    .on-status{
        background-image: linear-gradient(#24ec60 0, #1fe159 100%);
    }
    .off-status{
        background-image: linear-gradient(#ffb340 0, #ff9900 100%);
    }
    th.el-table-column--selection .el-checkbox{
        display:none;
    }
}
</style>